<template>
  <guat-page-layout title="补录审核">
    <template #tabs>
      <guat-tabs v-model="activeTab" :tabs @click-tab="handleOnClickTab" />
    </template>
    <template #actions>
      <guat-button-group
        :buttons="[
          {
            text: '筛选',
            internal: $config.$button.PLO,
            onClick: () => setDrawerVisible(true),
          },
        ]"
      />
    </template>
    <guat-make-up-table />
    <guat-apply-info-drawer title="补录申请详情">
      <!-- <MakeUpRecordInfoDesc :record="obj" /> -->
      <template #footer>
        <guat-button-group
          :buttons="[
            { text: '取消' },
            {
              text: '驳回',
              type: 'primary',
              status: 'danger',
            },
            {
              text: '通过',
              type: 'primary',
            },
          ]"
        />
      </template>
    </guat-apply-info-drawer>
  </guat-page-layout>
</template>

<script setup lang="ts">
import { createTableColumns } from "./table";
import { MakeUpRecordStatus } from "@/constant/dictionary";
import { MakeUpRecord } from "@/types/api/makeup";
import { RouteName } from "@/constant/route";
import { MakeUpPropertyMap as MUPM } from "@/map/make-up/property-map";

const tabs = MakeUpRecordStatus._ALL;
const router = useRouter();
const activeTab = ref<number | string>(0);

const { error } = useModalNotice();
const { success } = useMessage();
const [GuatMakeUpTable, { setTableData, setCheckboxVisible }] = useTable(
  createTableColumns({
    chk: handleOnCheck,
    aud: handleOnAudit,
    wtd: handleOnWithdraw,
  })
);
const [GuatApplyInfoDrawer, { setDrawerVisible }] = useDrawer();

const handleOnClickTab = (key: number | string) => {
  activeTab.value = key;
};

function handleOnWithdraw() {
  error({
    title: "撤销确认",
    content: "请确认是否要撤销当前补录申请？",
    onOk: () => success("撤销成功"),
  });
}

function handleOnCheck(record: MakeUpRecord["Table"]) {
  router.push({
    name: RouteName.MAKE_UP_CHECK,
    query: {
      id: record[MUPM.Id],
    },
  });
}

function handleOnAudit(record: MakeUpRecord["Table"]) {
  router.push({
    name: RouteName.MAKE_UP_AUDIT,
    query: {
      id: record[MUPM.Id],
    },
  });
}
// const obj = {
//   id: "748125748719542864",
//   title: "2022年第五届广西大学生程序设计大赛积分补录申请",
//   applyTime: "2023年4月10日 00:00:00",
//   applicant: {
//     id: "2153781",
//     userName: "admin",
//     userAvatar: "",
//   },
//   applyPoint: 8,
//   auditor: {
//     id: "2153781",
//     userName: "admin",
//     userAvatar: "",
//   },
//   auditTime: "2023年4月10日 00:00:00",
//   status: 3,
//   applyReason:
//     "司马光，字君实，号迂叟，陕州夏县涑水乡人，《宋史》，《辞海》等明确记载，世称涑水先生。生于河南省信阳市光山县。北宋史学家、文学家。历仕仁宗、英宗、神宗、哲宗四朝，卒赠太师、温国公，谥文正，主持编纂了中国历史上第一部编年体通史《资治通鉴》，为人温良谦恭、刚正不阿，其人格堪称儒学教化下的典范，历来受人景仰。生平著作甚多，主要有史学巨著《资治通鉴》、《温国文正司马公文集》、《稽古录》、《涑水记闻》、《潜虚》等。",
//   applyAttachment: [
//     "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp",
//     "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp",
//     "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp",
//     "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp",
//     "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp",
//   ],
//   avtivityName: "广西大学生程序设计大赛",
//   award: "一等奖",
// };
onMounted(() => {
  setCheckboxVisible(false);
  setTableData([
    {
      id: "748125748719542864",
      title: "2022年第五届广西大学生程序设计大赛积分补录",
      time: "2023年4月10日 00:00:00",
      applyPoint: 8,
      auditTime: "2023年4月10日 00:00:00",
      status: 1,
      auditor: {
        userName: "张三",
      },
    },
    {
      id: "748125748719542865",
      title: "2022年第五届广西大学生程序设计大赛积分补录",
      time: "2023年4月10日 00:00:00",
      applyPoint: 4,
      auditTime: "2023年4月10日 00:00:00",
      status: 2,
      auditor: {
        userName: "张三",
      },
    },
    {
      id: "748125748719542866",
      title: "2022年第五届广西大学生程序设计大赛积分补录",
      time: "2023年4月10日 00:00:00",
      applyPoint: 8,
      auditTime: "2023年4月10日 00:00:00",
      status: 3,
      auditor: {
        userName: "张三",
      },
    },
  ]);
});
</script>

<style scoped></style>
@/hooks_test/useTable
